<template>
  <div class="richText-view-container">
    <div class="rich-text-warp">
      <Editor
        apiKey="eh95ehour1g4mo89kphlx5stsjefy07d4njru1a0lmtf0qa1"
        :disabled="true"
        :init="setting"
        v-model="formData.content"
      ></Editor>
    </div>
    <div class="file-info">
      <div class="item">
        <i class="iconfont icona-wodeyonghufill" />
        {{ props.fileData.user_name }}
      </div>
      <div class="item">
        <i class="iconfont iconshijian" />
        {{ props.fileData?.updated_at }}
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import Editor from '@tinymce/tinymce-vue'
const style = require('@/utils/style.js')

const props = defineProps({
  fileData: {
    type: Object,
    default: () => {}
  }
})

/**
 * @desc: 获取富文本内容
 */
const formData = ref({
  content: ''
})
watch(
  () => props.fileData,
  (newVal) => {
    formData.value.content = newVal.content
  },
  { immediate: true }
)

/**
 * @desc: 富文本配置
 */
const setting = ref({
  language: 'zh_CN',
  height: 460,
  menubar: false, // 禁用菜单栏
  plugins: 'link image media table lists fullscreen quickbars',
  toolbar: false,
  toolbar_mode: 'sliding',
  placeholder: '请输入正文',
  branding: false,
  autosave_ask_before_unload: false,
  content_style:
    `body::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }
      body::-webkit-scrollbar-thumb {
        background-color: #c0c4cc;
        border: 3px solid transparent;
        border-radius: 7px;
      }
      body::-webkit-scrollbar-thumb:hover {
        background-color: #ededed;
      }
      img{
        display: block;
        margin: auto;
      }
      body::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 6px;
        background: #ededed;
      }` + style
})
</script>
<style lang="less" scoped>
.richText-view-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;

  .rich-text-warp {
    padding: 0 10px;
  }
  .file-info {
    display: flex;
    align-items: center;
    margin-top: 10px;
    padding: 10px;
    justify-content: space-between;
  }
}

</style>
